<template>
  <PanerGrid @onSubmit="handleSubmit" @onReset="handleReset">
    <template v-slot:search>
      <div class="d-group-items d-layout-grid d-layout-grid-4">
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">分组</label>
            </div>
            <div class="d-form-el">
              <select v-model="search.gid" class="d-form-select">
                <option v-for="item in groupList" :key="item.id" :value="item.id">{{ item.text }}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">页面地址</label>
            </div>
            <div class="d-form-el">
              <input v-model="search.href" @keyup.enter="handleSubmit" class="d-form-input" />
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">错误名称</label>
            </div>
            <div class="d-form-el">
              <input v-model="search.name" @keyup.enter="handleSubmit" class="d-form-input" />
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">报错信息</label>
            </div>
            <div class="d-form-el">
              <input v-model="search.message" @keyup.enter="handleSubmit" class="d-form-input" />
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">文件地址</label>
            </div>
            <div class="d-form-el">
              <input v-model="search.url" @keyup.enter="handleSubmit" class="d-form-input" />
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">标签</label>
            </div>
            <div class="d-form-el">
              <input v-model="search.labels" class="d-form-input" @keyup.enter="handleSubmit" type="text" />
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <FormCalendar
            v-model="search.createTime"
            label="创建时间"
            labelWidth="80px"
            class="d-form-group-flex"
          ></FormCalendar>
        </div>
      </div>
    </template>
    <template v-slot:header>
      <div class="d-paner-caption">
        <span class="d-caption-text">报错采集列表</span>
        <div class="d-bar-tools d-bar-tools-condensed">
          <span v-if="false" class="d-tools-item">
            <a class="d-btn d-btn-plain-sign" :href="getMicroPath('#/collect/error/item')">添加</a>
          </span>
          <span @click="handleDelChecked" class="d-tools-item">
            <button class="d-btn d-btn-plain-sign" type="button">删除</button>
          </span>
          <span class="d-tools-item">
            <a class="d-btn d-btn-plain-sign" :href="getMicroPath('#/collect/error/group/list')">分组管理</a>
          </span>
        </div>
      </div>
      <div class="d-bar-tools d-bar-tools-right d-bar-tools-condensed">
        <a @click="handleReload" class="d-tools-item">
          <span class="d-btn d-btn-plain-sign d-btn-square-sm d-btn-flex">
            <RefreshIcon />
          </span>
        </a>
      </div>
    </template>
    <template v-slot:body>
      <Grid v-model="list" ref="gridList" :request="gridRequest" :pageSize="15" @onClickPage="handleClickPage">
        <GridColumn :width="48" type="checkbox" />
        <GridColumn :width="60" type="index" label="序号" />
        <GridColumn field="href" label="页面地址" :width="260">
          <template v-slot:body="scope">
            <a :href="scope.href" :title="scope.href" class="d-text-theme d-text-linker" target="_blank">{{ scope.href }}</a>
          </template>
        </GridColumn>
        <GridColumn field="name" label="错误名称">
          <template v-slot:body="scope">
            <a :href="getMicroPath('#/collect/error/view/' + scope.id)" class="d-text-theme d-text-linker">{{ scope.name }}</a>
          </template>
        </GridColumn>
        <GridColumn field="message" label="报错信息" :width="120">
          <template v-slot:body="scope">
            <span :title="scope.message">{{ scope.message }}</span>
          </template>
        </GridColumn>
        <GridColumn field="url" label="文件地址" :width="120">
          <template v-slot:body="scope">
            <span :title="scope.url">{{ scope.url }}</span>
          </template>
        </GridColumn>
        <GridColumn field="time" label="产生时间" format="datetime|yyyy-MM-dd HH:mm:ss" :width="160" />
        <GridColumn field="userAgent" label="浏览器" :width="90">
          <template v-slot:body="scope">
            <span :title="scope.userAgent">{{ scope.userAgent }}</span>
          </template>
        </GridColumn>
        <GridColumn field="gid" label="分组" :format="formatGroup" :width="120" />
        <GridColumn field="updateTime" label="更新时间" format="datetime|yyyy-MM-dd HH:mm:ss" :width="160" />
        <GridColumn field="createTime" label="创建时间" format="datetime|yyyy-MM-dd HH:mm:ss" :width="160" />
        <GridColumn field="action" :width="100" label="操作">
          <template v-slot:body="scope">
            <div class="d-bar-tools d-bar-tools-condensed d-grid-actions">
              <a :href="getMicroPath('#/collect/error/item/' + scope.id)" class="d-tools-item d-text-theme" title="编辑"><EditIcon size="sm" /></a>
              <a @click="handleDelItem(scope)" class="d-tools-item d-text-theme" title="删除"><DeleteIcon size="sm" /></a>
            </div>
          </template>
        </GridColumn>
      </Grid>
    </template>
  </PanerGrid>
</template>

<script>
import { PanerGrid } from '@daelui/vdog/dist/pages'
import { storeSession } from '@daelui/dogjs/dist/components'
import { zh as locale } from '@daelui/dogjs/dist/locale'
import { Grid, GridColumn, Dialoger, FormCalendar, Pager } from '@daelui/vdog/dist/components'
import { RefreshIcon, EditIcon, DeleteIcon, SeeIcon } from '@daelui/vdog/dist/icons'
import collectSer, { api } from '@/service/action/collect-error.action.js'
import colGroSer from '@/service/action/collect-error-group.action.js'

export default {
  components: {
    PanerGrid,
    Grid,
    GridColumn,
    RefreshIcon,
    EditIcon,
    DeleteIcon,
    SeeIcon,
    FormCalendar,
    Pager
  },

  data () {
    return {
      // 搜索条件
      search: {
        gid: '',
        url: '',
        protocol: '',
        method: '',
        status: '',
        labels: '',
        content: '',
        createTime: '',
        updateTime: ''
      },
      // 参数存储key
      paramsKey: 'collect-error',
      list: [],
      // 表格请求配置
      gridRequest: {
        url: api.queryListPage.url, // 请求地址
        method: api.queryListPage.method, // 请求方式
        params: {}, // 请求参数
        request (data) {
          return collectSer.queryListPage(data.data)
        }
      },
      // 分组
      groupList: [],
      // 请求方式
      methodList: [],
      // 协议类型
      protocolList: []
    }
  },

  methods: {
    /**
     * @function 查询事件处理
    */
    handleSubmit () {
      this.$refs.gridList.reload(this.search)
      // 存储条件
      storeSession.setItem(this.paramsKey, this.search)
    },

    /**
     * @function 重置事件
    */
    handleReset () {
      this.search = {
        gid: '',
        url: '',
        protocol: '',
        method: '',
        status: '',
        labels: '',
        content: '',
        createTime: '',
        updateTime: ''
      }
      this.gridRequest.params = this.search
    },

    /**
     * @function 删除选定的数据
    */
    handleDelChecked () {
      let items = this.$refs.gridList.getChecked()
      this.removeItems(items)
    },

    /**
     * @function 删除单条数据
    */
    handleDelItem (item) {
      this.removeItems([item])
    },

    /**
     * @function 删除多条数据
    */
    removeItems (items) {
      items = Array.isArray(items) ? items : []
      if (items.length < 1) {
        Dialoger.warn(locale.list.selectOne)
        return false
      }
      Dialoger.confirm(locale.message.confirmDelete).then(b => {
        if (!b) {
          return false
        }
        items = items.map(item => item.id)
        collectSer.removeItem(items).then(result => {
          this.$refs.gridList.reload()
        })
      })
    },

    /**
     * @function 重新加载
    */
    handleReload () {
      this.$refs.gridList.reload(this.search)
    },

    /**
     * @function 分页点击事件
    */
    handleClickPage (data) {
      // data = data || {}
      // this.handleReload()
    },

    /**
     * @function 格式化分组
    */
    formatGroup (data) {
      let text = ''
      data = String(data || '')
      this.groupList.forEach(item => {
        if (String(data).toLowerCase() === String(item.id).toLowerCase()) {
          text = item.text
        }
      })
      return text
    }
  },

  beforeMount () {
    // 存储的条件
    let params = storeSession.getItem(this.paramsKey)
    if (params) {
      this.search = Object.assign(this.search, params)
      this.gridRequest.params = this.search
    }
  },

  mounted () {
    colGroSer.queryListAll({ hasAll: true }).then(list => {
      this.groupList = list
    })
  }
}
</script>

<style scoped>
.d-form-label {
  width: 80px;
}
</style>
